// 增强组件拥有过渡动画效果
import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group'
// import '@/app.css'
import 'animate.css'

const withTransition = Cmp => {
  return class extends Component {
    render() {
      return (
        <CSSTransition
          in={this.props.match ? true : false}
          timeout={2000}
          // classNames="wu"
          classNames={{
            enter: 'animate__animated',
            exit: 'animate__animated',
            enterActive: 'animate__fadeIn',
            exitActive: 'animate__fadeOut'
          }}
          unmountOnExit
        >
          {
            this.props.match ? <Cmp {...this.props} /> : <div></div>
          }
        </CSSTransition>
      )
    }
  }
}

export default withTransition